<template>
  <div>
    <v-card style="width:100%;">
      <v-card-title>
        <h3>{{name}}</h3>
      </v-card-title>
    </v-card>
    <p></p>
    <v-card style="width:100%;">
      <v-card-title>
        <v-flex xs12 sm12 md5 class="pr-3">
          <newips></newips>
          <v-btn dark color="teal" @click.stop="ipsDownload" small><v-icon dark>file_download</v-icon></v-btn>
        </v-flex>
        <v-flex xs12 sm12 md5 class="pr-3">
          <v-text-field append-icon="search" :label="searchLabel" single-line hide-details v-model="search" ></v-text-field>
        </v-flex>
        <editips :editdialog = "editdialog" :id = "id"></editips>
      </v-card-title>
        <v-data-table
          :headers="headers"
          :items="items"
          :pagination.sync="pagination"
          :total-items="totalItems"
          :loading="loading"
          :rows-per-page-items="rowsPerPageItems"
          :no-data-text="etext"
          class="elevation-1">
          <template slot="items" slot-scope="props">
             <td class="datastyle" v-for="(value) in headers" :key="value.id" @click.stop="openIpsEdit(props.item)">{{props.item[value.value]}}</td>
          </template>
          <template slot="no-data">
            <v-alert :value="true" color="error" icon="warning">
              {{etext}}
            </v-alert>
          </template>
        </v-data-table>
    </v-card>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('listips')

export default {
  data: function () {
    return this.$store.state.listips
  },
  watch: {
    pagination () {
      this.handlerIps()
    },
    search () {
      this.handlerIps()
    }
  },
  methods: {
    ...mapActions({
      handlerIps: 'handlerIps',
      openIpsEdit: 'openIpsEdit',
      ipsSearch: 'ipsSearch',
      ipsDownload: 'ipsDownload',
      loadIpsHeaders: 'loadIpsHeaders'
    })
  },
  mounted () {
    this.loadIpsHeaders()
  },
  components: {
    newips: () => import('../ips/newips'),
    editips: () => import('../ips/editips')
  }
}
</script>
